//1.获取数据
let data=null;
//集合，无法使用sort排序
//集合---数组,才能sort排序 Array.from()
let cloumns=Array.from(document.querySelectorAll(".cloumn"));
// 找不到渲染上去的元素,必须在渲染结束后，才能找到
let imgboxs=null;

function getData(){
//   let xhr=new XMLHttpRequest;
//   xhr.open("get","data.json",false);
//   xhr.onreadystatechange=function(){
//      if(xhr.status===200&&xhr.readyState===4){
//         data=JSON.parse(xhr.response);
//      }
//   }
//   xhr.send(null);

  $.ajax({
      url:"data.json",
      success:function(response){
         data=response;
      },
      async:false
  })
}
getData();

//2.循环渲染
function render(){
   //2.1统一处理数据
   //数据与样式不一样，需要统一修改数据
   let newdata=data.map((item)=>{
      let {width,height}=item;//width:300 height:400
      item.width=230;
      item.height=height*230/width;
      return item;
   })

   let groups=null;
   for(var i=0;i<newdata.length;i+=3){//i=0 3 6
      //i=0  slice(i,i+3)  slice(0,3) [0,1,2]
      //i=3  slice(i,i+3)  (3,6) [3,4,5]
      groups=newdata.slice(i,i+3);
      //按照图片的height 排 大,中,小的顺序
      groups.sort((a,b)=>{
         return b.height-a.height;
      })
      
      //每列按照 内容高度（offsetHeight） 小，中，大 排序
      cloumns.sort((a,b)=>{
        return a.offsetHeight-b.offsetHeight;
      })
     
      //按照索引下标，一一对应插入
      groups.forEach((item,index)=>{
         let {id,pic,height,title,link}=item;
         let str=`<div class="item" data-id="${id}">
                <a href="${link}">
                    <div class="imgbox" style="height:${height}px">
                        <img src="" data-src="${pic}" alt="" style="height:${height}px">
                    </div>
                    <p>${title}</p>
                </a>
            </div>`
        cloumns[index].innerHTML+=str;
      })
   }
   //必须在渲染结束后，才能找到
   imgboxs=Array.from(document.querySelectorAll(".imgbox")); 
}
render();


function showimg(img){
   let dataSrc=img.getAttribute("data-src");
   let newimg=new Image;
   newimg.src=dataSrc;
   newimg.onload=function(){
      img.src=dataSrc;
      newimg=null;
      img.flag=true;
   }
}

//实现图片懒加载功能
function handle(){
    //创建监听器
    let ob=new IntersectionObserver(changes=>{
       //console.log(changes);//数组里含有51个对象
       changes.forEach(change=>{
          if(change.isIntersecting){
            //满足条件，监控的8个盒子
            //console.log(change.target);
            //满足条件，8个盒子下面的图片
             let img=change.target.querySelector("img");
             if(img.flag){
               ob.unobserve(change.target);//取消当前目标元素的监控
               return;
             }
             showimg(img);
          }
       })
    },{
      threshold:[1]
    })
    //监听元素
    imgboxs.forEach((imgbox)=>{
      ob.observe(imgbox)//监控51个图片盒子
    })
}
handle();

let loadmorebox=document.getElementById("loadmore");
let count=0;
function loadmore(){
   let ob2=new IntersectionObserver((changes)=>{
       if(changes[0].isIntersecting){
           count++;
           if(count>3){
             ob2.unobserve(changes[0].target);
             loadmorebox.innerHTML="加载已完成,暂无更多数据"
             return;
           }
           getData();
           render();
           handle();
       }
   },{
      threshold:[0.5]
   })
   ob2.observe(loadmorebox)
}
loadmore();

